import React, { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { BrowserRouter, createBrowserRouter, RouterProvider, Router, Route, Routes, Navigate, Link, Outlet, useRoutes } from 'react-router-dom'


// 导入全局默认的样式
import './styles/index.css'
// createApp默认
import './index.css'
// 通过继承一次导入
// import * as pageIndex from './pages/index';
// console.log(111111122222, pageIndex)

// import App from './App.jsx'
import { Box, Welcome } from './pages/1-组件化的基本使用.jsx'
import {
  WelcomeDialog,
  WelcomeDialog1,
  WelcomeDialog3,
  SignUpDialog,
  MouseTracker,
} from './pages/2-组件的嵌套与继承.jsx'
import { EventTemplate } from './pages/3-react事件处理.jsx'
import { Father } from './pages/3-class组件生命周期/father.jsx'
import { RefTemplate } from './pages/4-refs获取Element和组件.jsx'
import { ForwardRefTemplate } from './pages/4-refs转发.jsx'
import { SetstateTemplate } from './pages/5-setState异步同步.jsx'
import { ConTextTemplate } from './pages/6-context组件间传递数据.jsx'
import { PropTypesTemple } from './pages/7-react中定义propType使用clasName及css.jsx'
import { ReduxToolkitTemplate } from './pages/8-使用reduxjs_toolKit全局传递数据.jsx'
import { CurryTemplate } from './pages/9-函数柯里化及thunk中间件实现原理.jsx'
import { RouterApp } from './pages/router/10-router使用及原理.jsx'
import { RouterApp1 } from './pages/router/10.1-router使用及原理.jsx'
import { RouterApp2 } from './pages/router/10.2-router使用及原理.jsx'
import { FormUseCallback } from './pages/hook/12.1-hook中使用refs并监听.jsx'

import UseRequest1 from './ahook/useRquest1.jsx'
import UseThrottlePage from './hooks/useThrottlePage.jsx'
const boxStyle = {
  margin: '10px',
  border: '1px solid #ccc',
  borderRadius: '10px',
  padding: '10px',
}
const modules = import.meta.glob('./pages/*.jsx', { eager: true });
console.log(4444444444,import.meta, modules)

const importAll = (modules) => {
  Object.keys(modules).forEach((key) => {
    console.log(23223,key)
    // const component = key.replace('/src/', '@/').replace('.vue', '');
    // const componentName = key.split('/').slice(-2, -1)[0] + '-page';
    // app.component(componentName, modules[key].default);
  });
};
// 动态导入src/pages目录下的所有子文件
const modules1 = import.meta.glob('./pages/**/*.jsx');
const aa = importAll(modules1);
console.log(111111,aa)

// StrictMode使用语法/兼容 严格模式,打印会输出两遍 使用废弃或已过时的接口时,会出现相应的错误警告
// <StrictMode> </StrictMode>
createRoot(document.getElementById('root')).render(
  <React.Fragment>
    {false && <Welcome />}

    {false && <Box></Box>}

    {false && <WelcomeDialog />}

    {false && <WelcomeDialog1 />}

    {false && <WelcomeDialog3></WelcomeDialog3>}

    {false && <SignUpDialog></SignUpDialog>}

    {false && <MouseTracker MouseTrackerProps1={'MouseTrackerProps1'} MouseTrackerProps2={'MouseTrackerProps2'} />}

    {false && <EventTemplate />}

    {false && <Father />}

    {false && <RefTemplate />}

    {false && <ForwardRefTemplate />}

    {false && <SetstateTemplate></SetstateTemplate>}

    {false && <ConTextTemplate></ConTextTemplate>}

    {false && <PropTypesTemple></PropTypesTemple>}

    {false && <ReduxToolkitTemplate></ReduxToolkitTemplate>}

    {false && <CurryTemplate></CurryTemplate>}

    <p style={boxStyle}>router不一定要放置在组件的根节点</p>
    {false && <RouterApp></RouterApp>}

    {false && <RouterApp1></RouterApp1>}

    {false && <RouterApp2></RouterApp2>}

    {true && <FormUseCallback></FormUseCallback>}

    {true && <UseRequest1></UseRequest1>}
    {true && <UseThrottlePage></UseThrottlePage>}

  </React.Fragment>
)
